<template>
  <div class="content-block">
    <h4>{{ t('settings.locationSignTitle') }}</h4>
    <BaiduMapPicker v-model="location" />
    <div class="input-group">
      <label>{{ t('label.signRadius') }}</label>
      <input
          type="number"
          v-model.number="location.radius"
          min="0"
          class="radius-input"
          :placeholder="t('placeholder.enterRadius')"
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import BaiduMapPicker from '@/components/BaiduMap.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const location = ref({
  latitude: 39.9087,
  longitude: 116.3975,
  radius: null
})

const getLocation = () => {
  return {
    latitude: location.value.latitude,
    longitude: location.value.longitude,
    range: location.value.radius
  }
}

import { defineExpose } from 'vue'
// 暴露方法
defineExpose({
  getLocation
})
</script>

<style scoped>
.content-block {
  padding: 1.5vh 0;
}

.content-block h4 {
  margin: 0.5vh 0;
  font-size: 14px;
  font-weight: 500;
}

.input-group {
  margin: 1.5vh 0;
}

.radius-input {
  width: 200px;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-top: 0.5vh;
}

.radius-input:focus {
  outline: none;
  border-color: #409eff;
}

label {
  font-size: 13px;
  color: #606266;
}
</style>